/*Timeline*/

var time = 17;
var recipieTime = 17;
var collisionStep = -1;

function findRecipieTime(){
	var list = "";
	$(":input.time").each(function(){
		list += $(this).val() + " | ";
	});
}

var stepBars = Array();

function collsionDetection(){
	//$('document').ready(function(){ 
	var tickerPosition = ticker[0].getX();
	
	for(var i=0;i<stepBars.length;i++){
		var stepWidth = stepBars[i].getWidth();
		var xStart = stepBars[i].getX();
		if(tickerPosition >= xStart && tickerPosition <= (xStart + stepWidth)){
			collisionStep = i;
			break;
		}
		$("#" + i).removeClass('active');
		collisionStep = -1;
	}
	
		if(collisionStep == -1) return;
		
		var hasClass = $("#" + collisionStep).hasClass('active');
		if(!hasClass){
			$("#" + collisionStep).addClass('active');
		}

}

function generateSteps(){

	clearSteps();
	var pos = 0;
	var start = 22;
	$(".stepP").each(function(){ 
		var stepTime = $(this).children(".time").val();

		stepBars[pos] = new Kinetic.Rect({
			x: start,
			y: 10,
			width: stepTime * 60,
			height: 80,
			fill: 'red'
		});
		baseLayer.add(stepBars[pos]);
		
		start += stepTime*60 + 20;
		pos++;
	});
	generateTicker();
	stage.add(baseLayer);
		
}

function clearSteps(){
	baseLayer.remove();
	stage.clear();
	generateTics();
	generateDragBar();
	time = 17;
	
}


var stage;
function generateStage(){
	stage = new Kinetic.Stage({
			container: 'timeLine',
			width: 1000,
			height: 100,
			draggable: false,
			dragBoundFunc: function(pos) {
			
			var newX = pos.x;
				if(pos.x > 0) {
					newX = 0;
				}
				
				//possibly do an X max later

			  return {
				  x: newX,
				  y: 0
				};
			}
		});
	}

var baseLayer = new Kinetic.Layer();

//*Tic Marks
var ticMarks = Array();
var ticBars  = Array();

function generateTics(){
		var xPosition = 20;
		var yPosition = 0;
		
		for(var i=0; i<(recipieTime / 20); i++){
			var xPos =  xPosition + 20*(i);
			var yPos = yPosition;
			
			ticMarks[i] = new Kinetic.Rect({
				x: xPos,
				y: yPos,
				width: 5,
				height: 3,
				fill: 'black'
			});
			
			ticBars[i] = new Kinetic.Rect({
				x: xPos+2,
				y: yPos,
				width: 1,
				height: 100,
				fill: 'black'
			});
			
			baseLayer.add(ticMarks[i]);
			baseLayer.add(ticBars[i]);
		}
}

var baseRect; //Global

function generateDragBar(){
	//**Drag Bar
		baseRect = new Kinetic.Rect({
        x: 0,
        y: 45,
        width: time, //This needs to be set to the time length
        height: 10,
        fill: '#252525',
		draggable: true,
		dragBoundFunc: function(pos) {
		
			if(pos.x > 0) pos.x = 0;
			if((baseRect.getX() - stage.getX()) > 950) {
			
				//pos.x needs an upper bound, correct with stage.getX()
				//Log inside needs work
			
				var correction = 950 -(baseRect.getX() - stage.getX()) + 1;
			
				//alert(stage.getX() - correction);
			
				return{
				
				x: stage.getX() - correction,
				y: 45
				};
				
			}

			stage.move(pos.x - stage.getX(), 0);

			return{
			x: pos.x,
			y: 45
			};

		}

    });
	
	
	baseRect.on("mouseover", function(){
		document.body.style.cursor = "pointer";
	});
	
	baseRect.on("mouseout", function(){
		document.body.style.cursor = "default";
	});
	
	baseLayer.add(baseRect);
}


var ticker = Array();
var tickerXPos = 3;
var tickerYPos = 0;

function generateTicker(){
	
	ticker[0] = new Kinetic.Rect({ //Actual Bar
		x: tickerXPos,
		y: tickerYPos,
		width: 3,
		height: 100,
		fill: 'purple',
		draggable: true,
		dragBoundFunc: function(pos){
		
			if(pos.x < 3) pos.x = 3;
			if(pos.x > recipieTime) pos.x = recipieTime;
		
			ticker[1].move(pos.x - ticker[1].getX() - 2 - stage.getX(), 0);
			ticker[2].move(pos.x - ticker[2].getX() - 2 - stage.getX(), 0);
			
			tickerXPos = pos.x;
			tickerYPos = 0;
			
			currentPosition();
			collsionDetection();
			pause = true;
			
			return{
				x: pos.x,
				y: 0
			};
		}
	});
	
	ticker[0].on("mouseover", function(){
		document.body.style.cursor = "pointer";
	});
	
	ticker[0].on("mouseout", function(){
		document.body.style.cursor = "default";
	});
	
	ticker[1] = new Kinetic.Rect({ //Top Bar
		x: tickerXPos - 2,
		y: tickerYPos,
		width: 7,
		height: 3,
		fill: 'purple'
	});
	
	ticker[2] = new Kinetic.Rect({ //Top Bar
		x: tickerXPos - 2,
		y: tickerYPos + 97,
		width: 7,
		height: 3,
		fill: 'purple'
	});
	
	baseLayer.add(ticker[0]);
	baseLayer.add(ticker[1]);
	baseLayer.add(ticker[2]);
}



function tickerMove(){
	if(pause) return 0;
	if(ticker[0].getX() >= recipieTime) return;
	
	ticker[0].move(1,0);
	ticker[1].move(1,0);
	ticker[2].move(1,0);
	
	tickerXPos = ticker[0].getX();
	currentPosition();
	collsionDetection();
	
	if((ticker[0].getX() % 10) == 0)
		stage.move(-10, 0);
		
	stage.draw();
	
}

var pause = true;
setInterval(tickerMove,1000);


//Displays the current position of the ticker in time
function currentPosition(){

	var xOffset = 0;
	var ctime 	= tickerXPos - stage.getX() -3;
	
	var hours = Math.floor(ctime/(60*60)) + "";
		if(hours.length < 2) hours = "0" + hours;
	var minutes = Math.floor((ctime - (hours*60*60)) / 60) +"";
		if(minutes.length < 2) minutes = "0" + minutes;
	var seconds = (ctime - (hours*60*60) - (minutes*60)) +"";
		if(seconds.length < 2) seconds = "0" + seconds;
	
	$(".timelineCurrentPosition").html(hours + ":" + minutes + ":" + seconds);
	$(".timelineStagePosition").html(stage.getX());
	$(".timelineRecipieLength").html(time);
	

}

$(document).ready(function(){
	time = $("#totalTime").val();
	recipieTime = time;
	$("#timeLine").sticky({topSpacing:0});
	$(".timelineText").sticky({topSpacing:100});
	
	$(".time").live("focusout",function(){
		if(isNaN(($(this).val()))) return;
		findRecipieTime();
		generateSteps();
	});
	
	$(".steps").live("focusout",function(){
		generateSteps();
	});
	
	
var playTimer;
	$('.timelinePLAY').click(function(){
		pause = false;
	});
	
	$('.timelinePAUSE').click(function(){
		pause = true;
	});
	
	
	$("#timeLine").onselectstart = function () { return false; } //Doesn't fix going outside of bounds

	generateStage();
	generateTics();
	generateDragBar();
	generateTicker();
	currentPosition();
	stage.add(baseLayer);

});
